<template>
  <view class="disease-diagnosis" v-if="oState">
    <text class="tit rbox">填写信息</text>
    <van-cell-group>
      <van-field
        :value="value"
        label="单位名称"
        placeholder="输入您的单位地址及名称"
        border="true"
        autosize
      />
      <van-field
        :value="value"
        label="采样位置"
        placeholder="请输入采样位置"
        border="true"
      />

      <view class="line rbox box_space_b">
        <text class="name">葡萄种类</text>
        <text class="picker-wrap" @tap="show = true">{{
          info || "请选择(此处可多选)"
        }}</text>
      </view>
      <multiple-select
        v-model="show"
        :data="list"
        :default-selected="defaultSelected"
        @confirm="confirm"
      ></multiple-select>

      <van-field
        :value="value"
        label="手机号码"
        placeholder="请填写您的手机号码"
        border="true"
      />

      <van-field
        :value="value"
        label="电子邮箱"
        placeholder="请填写您的邮箱地址"
        border="true"
      />

      <view class="sketch-wrap">
        <text class="sketch-tit">相关说明</text>
        <textarea class="sketch" placeholder="请描述您的说明" />
      </view>
    </van-cell-group>

    <view class="upload-img">
      <text class="upload-img-tit">请上传图片</text>
      <sunuiUpimg></sunuiUpimg>
    </view>

    <view class="btn-wrap rbox box_space_b">
      <view
        class="btn btn-goast rbox box_center"
        @tap="goPage('diseaseInspection')"
        >直接送检</view
      >
      <view class="btn btn-normal rbox box_center" @tap="freeDiagnosis"
        >免费诊断</view
      >
    </view>

    <van-popup :show="popState" @tap="onClose">
      <view class="pop-box cbox">
        <text class="name rbox">请确认是否需要免费诊断</text>
        <view class="sub-wrap rbox box_x_center"
          >（点否可选择<text @tap="goPage('diseaseInspection')">立即送检</text
          >）</view
        >
        <view class="btns rbox box_space_b">
          <view class="btn ok rbox box_center" @tap="oState = false">是</view>
          <view class="btn no rbox box_center" @tap="onClose">否</view>
        </view>
      </view>
    </van-popup>
  </view>
  <view class="disease-diagnosis success" v-else>
    <view class="user-tip cbox box_y_center">
      <view class="iconfont icon-ok rbox box_center"></view>
      <text class="msg">已提交，请稍后查看结果</text>
      <text class="tip">信息上报完成可查看结果</text>
      <view class="choose rbox box_y_center">
        <text class="rbox">您也可以</text>
        <view class="rbox box_center" @tap="goPage('diseaseInspection')"
          >直接送检</view
        >
      </view>
    </view>
    <text class="phone-num">客服号码：010-123456</text>
  </view>
</template>

<script>
import multipleSelect from "../../components/multiple-select/multiple-select"
import { vanField } from "../../wxcomponents/vant/field/index.js"
import { vanPopup } from "../../wxcomponents/vant/popup/index.js"
import sunuiUpimg from "../../components/sunui-upimg/sunui-upimg"
export default {
  data() {
    return {
      oState: true,
      value: '',
      show: false, //是否显示 - 双向绑定
      info: "",
      list: [], //数据源
      defaultSelected: ["3", "5"], //默认选中项
      popState: false
    }
  },
  components: {
    vanField,
    vanPopup,
    multipleSelect,
    sunuiUpimg
  },
  methods: {
    freeDiagnosis() {
      this.popState = !this.popState
    },
    onClose() {
      this.popState = false
    },
    goPage(url) {
      console.log(url)
      wx.navigateTo({
        url: `/pages/${url}/${url}`
      })
    },
    confirm(data) {
      console.log(data);
      this.info = data.map(el => el.label).join(",");
    }
  },
  onShow() {
    //模拟异步数据
    setTimeout(() => {
      this.list = [
        {
          label: "白葡萄",
          value: "1"
        },
        {
          label: "红葡萄",
          value: "2",
          disabled: true //禁用
        },
        {
          label: "新疆葡萄",
          value: "3"
        },
        {
          label: "进口葡萄",
          value: "4"
        },
        {
          label: "有机葡萄",
          value: "5"
        }
      ];
    }, 1000);
  },
}
</script>

<style lang="scss" scoped>
.disease-diagnosis {
  padding-bottom: 30rpx;
  .tit {
    padding: 0 42rpx;
    margin-top: 40rpx;
    margin-bottom: 20rpx;
    font-size: 40rpx;
    line-height: 1;
    color: #333;
  }
  .line {
    position: relative;
    padding: 20rpx 30rpx;
    &::after {
      position: absolute;
      box-sizing: border-box;
      -webkit-transform-origin: center;
      transform-origin: center;
      content: " ";
      pointer-events: none;
      right: 16px;
      bottom: 0;
      left: 16px;
      border-bottom: 1px solid #ebedf0;
      -webkit-transform: scaleY(0.5);
      transform: scaleY(0.5);
    }
    .name {
      color: #646566;
    }
    .picker-wrap {
      color: #646566;
      width: 60%;
      text-align: center;
    }
  }
  &.success {
    position: relative;
    height: 100vh;
    .user-tip {
      .iconfont {
        margin-top: 182rpx;
        width: 170rpx;
        height: 170rpx;
        font-size: 80rpx;
        font-weight: 800;
        color: #fff;
        background-color: #1de1c3;
        border-radius: 50%;
      }
      .msg {
        margin-top: 38rpx;
        font-size: 36rpx;
        line-height: 1;
        color: #1de1c3;
      }
      .tip {
        margin-top: 18rpx;
        font-size: 24rpx;
        line-height: 1;
        color: #6d6d6d;
      }
      .choose {
        margin-top: 200rpx;
        text {
          font-size: 28rpx;
          line-height: 1;
          color: #6d6d6d;
        }
        view {
          margin-left: 28rpx;
          width: 160rpx;
          height: 56rpx;
          font-size: 28rpx;
          line-height: 1;
          color: #fff;
          background: #1de1c3;
          border-radius: 34rpx;
        }
      }
    }
    .phone-num {
      position: absolute;
      bottom: 228rpx;
      left: 50%;
      transform: translateX(-50%);
      font-size: 24rpx;
      line-height: 1;
      color: #6d6d6d;
    }
  }
  /deep/ .van-field__input--textarea {
    text-align: center;
  }
  /deep/ .van-field__input {
    text-align: center !important;
  }
  .sketch-wrap {
    padding: 0 30rpx;
    margin-top: 20rpx;
    .sketch-tit {
      font-size: 28rpx;
      line-height: 1;
      color: #646566;
    }
    .sketch {
      margin-top: 20rpx;
      padding: 22rpx 30rpx;
      min-height: 260rpx;
      background: #ffffff;
      border: 2rpx solid #e9e9e9;
      box-shadow: 0px 0px 6rpx rgba(0, 0, 0, 0.16);
      border-radius: 30rpx;
    }
  }
  .upload-img {
    padding: 0 30rpx;
    margin-top: 20rpx;
    .upload-img-tit {
      font-size: 28rpx;
      line-height: 1;
      color: #646566;
    }
  }
  /deep/.van-popup {
    background-color: transparent;
  }
  .pop-box {
    padding: 40rpx 40rpx;
    width: 526rpx;
    min-height: 320rpx;
    border-radius: 30rpx;
    background-color: #fff;
    .name {
      margin-top: 20rpx;
      font-size: 40rpx;
      line-height: 1;
      color: #888;
    }
    .sub-wrap {
      margin-top: 20rpx;
      font-size: 28rpx;
      line-height: 1;
      color: #8e8e8e;
      text {
        color: #1de1c3;
      }
    }
    .btns {
      margin-top: 52rpx;
      .btn {
        width: 188rpx;
        height: 66rpx;
        border: 1rpx solid #1de1c3;
        border-radius: 34rpx;
        &.ok {
          color: #1de1c3;
          background: #ffffff;
        }
        &.no {
          color: #fff;
          background: #1de1c3;
        }
      }
    }
  }
}
</style>
